<!--
 * @description 通用搜索组件
 * @author dumeng
 * @date 2022/11/12
 -->
<template>
  <div class="search-comp-page" :style="{'background-color':btnColor, 'margin-left': margins, 'margin-right': margins, paddingTop, paddingRight, paddingBottom, paddingLeft, height: height, 'position': isFixed==='1' && isInitData ? 'absolute' :undefined,'top': fixedToTop, 'margin-top': top, }">
    <div class="search-container">
      <div class="top-search">
        <div class="s-input">
          <input v-model="searchText" class="search-input" type="text" :placeholder="placeholder">
        </div>
        <div
          class="s-btn"
          @click="startSearch"
        >
          {{ btnName }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from './../mixins'
export default {
  name: 'SearchComp',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    varInfo: {
      type: Object,
      default: () => { }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchText: ''
    }
  },
  computed: {
    height() {
      return this.px2rem(this.option.height || 88)
    },
    
    btnColor() {
      return this.option.colorType ? this.option.btnColor : '#2DA7B5'
    },
    placeholder() {
      return this.option.placeholder || ''
    },
    isFixed() {
      return this.option.isFixed || ''
    },
    fixedToTop() {
      return this.px2rem(this.option.fixedToTop || 0)
    },
    btnName() {
      return this.option.btnName || '搜索'
    }
  },
  methods: {
    /**
     * 点击搜索按钮事件
     */
    startSearch() {
      this.dispatch_event('filed-value-change', this)
    },
    getValue() {
      return this.searchText
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
  .search-comp-page{
    @include bg-color($mainColor);
    left: 0;
    right: 0;
    z-index: 2;
    .search-container {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      .top-search {
        width: 100%;
        height: rem(68);
        display: flex;
        align-items: center;
        .s-input {
          width: 0;
          height: 100%;
          flex: 1;
          .search-input {
            width: 100%;
            height: rem(68);
            border-radius: rem(32);
            border: none;
            background-color: #fff;
            opacity: 0.6;
            font-size: rem(28);
            font-family: PingFang SC Regular, PingFang SC Regular-Regular;
            font-weight: 400;
            text-align: left;
            padding: 0 rem(30);
          }
          .search-input::-webkit-input-placeholder {
            opacity: 0.6;
            font-size: rem(28);
            font-family: PingFang SC Regular, PingFang SC Regular-Regular;
            font-weight: 400;
            text-align: left;
          }
        }
        .s-btn {
          flex: 0 0 auto;
          height: 100%;
          margin-left: rem(29);
          width: rem(62);
          font-size: rem(28);
          font-family: PingFang SC Regular, PingFang SC Regular-Regular;
          font-weight: 400;
          text-align: left;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
</style>
